<template>
  <ul class="home-top-menus">
    <li v-for="(o,i) in menus" :key="i" :class="{current: i == activedIndex}" @click="gotoMenu(o, i)">
      <i class="iconfont" :class="`icon-${o.icon}`"/>
      <div class="text">{{o.name}}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'HomeTopMenus',
  data () {
    return {
      // activedIndex: this.$store.getters['system/activedMenuIndex']
    }
  },
  computed: {
    menus () {
      return this.$store.getters['system/menus']
    },
    activedIndex () {
      return this.$store.getters['system/activedMenuIndex']
    }
  },
  created () {
    // 获取菜单信息
    this.$store.dispatch('system/queryMenus')
    console.log('============', this.activedIndex)
  },
  methods: {
    gotoMenu (menu, index) {
      // this.activedIndex = index
      this.$store.commit('system/updateActivedMenuIndex', index)
      let path = menu.path
      if (menu.children && menu.children.length) {
        path = menu.children[0].path
      }
      path && this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
.home-top-menus{
  display: flex;
  height: 60px;
  padding: 0 30px;
  margin: 0;
  background-image: linear-gradient(90deg, #DE4848 0%, #FB6C78 100%);
  color: #FFF;
  li{
    position:relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 40px;
    cursor: pointer;
    &::after{
      position: absolute;
      bottom: 0;
      display: block;
      content: '';
      width: 0;
      height: 4px;
      background: #FDBB16;
      transition: all .2s;
    }
    &.current, &:hover{
      // cursor: default;
      &::after{
        width: 100%;
      }
    }
    .iconfont{
      margin-right: 10px;
    }
    .text{
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
